<template>
	<view class="content">
		<nav-bars backState="1000" :bgColor="navBackground" fontColor="#000" title="我的奖品"></nav-bars>
		<view class="header-top">
			<view class="msg layout-sidebar">
				<view class="sidebar_a">
					<image :src="imageSrc+'/static/activity/msg.png'"></image>
					<text>若在有效日期之前未兑换，所有奖品将清零！</text>
				</view>
				<view class="sidebar_b">
					<!-- <image :src="imageSrc+'/static/login/close.png'"></image> -->
				</view>
			</view>
		</view>
		<view class="main-list">
			<view class="wrap-box" v-if="list.length>0">
				<view class="list layout-sidebar" v-for="(item,index) in list" :key="index">
					<view class="sidebar_a">
						<image :src="item.prize_img"></image>
					</view>
					<view class="sidebar_b">
						<text style="color: #201B18; font-weight: bold; font-size: 30rpx;">{{item.prize_name}}</text>
						<text>{{item.sub_name}}</text>
						<text>有效期至{{formatDate(item.end_at)}}</text>
					</view>
					<view class="sidebar_c" @click="goSkip('/pages_activity/pages/lotteryDraw/writeOff/index?id='+item.prize_id+'&code='+item.prize_code+'&title='+item.prize_name+'&end_time='+item.end_at)" v-if="item.store_id<=0 && item.type!=5">
						兑换
					</view>
					<view class="sidebar_c" v-else-if="item.store_id>0 && item.type!=5">
						已兑换
					</view>
					<view class="sidebar_c sidebar_hide" v-if="item.type==5"></view>
					
				</view>
				<!-- <view class="list layout-sidebar">
					<view class="sidebar_a">
						<image :src="imageSrc+'/static/activity/gold.png'"></image>
					</view>
					<view class="sidebar_b">
						<text style="color: #201B18; font-weight: bold; font-size: 30rpx;">500元现金补贴</text>
						<text>全场满100减50</text>
					</view>
					<view class="sidebar_c" v-if="writeOff===0">
						兑换
					</view>
					<view class="write-off" v-else>
						<image :src="imageSrc+'/static/activity/writeoff.png'"></image>
					</view>
				</view> -->
				
			</view>
			<view class="notList" v-else>
				<image :src="`${imageSrc}/static/constr/notList.png`" mode=""></image>
				空空如也
			</view>
		</view>
	</view>
</template>

<script>
	import activity from '@/service/activity.js';
	export default {
		components: {
			
		},
		data() {
			return {
				navBackground: '',
				imageSrc: this.$static,
				writeOff:1,//1核销
				page:1,
				pagesize:10,
				// 是否滑动到底部
				isScrollBtm: true,
				isScrollFlag: false,
				list: [],
			}
		},
		onLoad() {
         this.$utils.getUrl()
		  // this.getPrizeList();
		},
		onShow() {
		  this.page = 1
		  this.list = []
		  this.getPrizeList();
		},
		onReachBottom() {
			this.isScrollBtm = true;
			this.isScrollFlag = true;
			setTimeout(() => {
				this.isScrollFlag = false;
			}, 500);
			this.page++
			this.getPrizeList()
		},
		
		methods: {
           goSkip(url){
			   this.$common.navigateTo(url);
		   },
		   getPrizeList(){
			   uni.showLoading()
			   activity.activityRecord({
			   		page: this.page,
					pagesize:this.pagesize,
					channel:0,
			   		user_id: uni.getStorageSync('userId'),
			   	})
			   	.then(res => {
			   		uni.hideLoading()
			   		let _this = this;
			   		if (res.code == 1) {
						let data=res.data.data;
			   			//_this.list = data;
						for (var i = 0; i < data.length; i++) {
							_this.list.push(data[i]); // 加载的数据追加在上一页后面
						}
			   		} else {
			   			_this.$common.errorToShow(res.msg)
			   		}
			   	})
			   	.catch(err => {
			   		uni.hideLoading()
			   	})
		   },
		  formatDate(value) {
		   	let date = new Date(parseInt(value) * 1000);
		   	let y = date.getFullYear();
		   	let m = date.getMonth() + 1;
		   	m = m < 10 ? "0" + m : m;
		   	let d = date.getDate();
		   	d = d < 10 ? "0" + d : d;
		   	let h = date.getHours();
		   	h = h < 10 ? "0" + h : h;
		   	let minute = date.getMinutes();
		   	let second = date.getSeconds();
		   	minute = minute < 10 ? "0" + minute : minute;
		   	second = second < 10 ? "0" + second : second;
		   	return y + "-" + m + "-" + d;
		   },
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.layout-sidebar {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.header-top {
			.msg {
				width: 90%;
				margin: 60rpx auto;

				.sidebar_a {
					display: flex;
					align-items: center;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 10rpx;
						border-radius: 20rpx;
					}

					text {
						width: auto;
						height: 24rpx;
						font-size: 26rpx;
						font-weight: 500;
						color: #201B18;
						line-height: 24rpx;
					}
				}

				.sidebar_b {
					image {
						width: 24rpx;
						height: 24rpx;
					}

				}
			}
		}

		.main-list {
			.wrap-box {
				width: 92%;
				margin: auto;

				.list {
					width: 100%;
					height: 190rpx;
					.sidebar_a {
						display: flex;
						align-items: center;
						margin-right:10rpx;

						image {
							width: 100rpx;
							height: 100rpx;
						}
					}

					.sidebar_b {
						width: 358rpx;
						font-size: 26rpx;
						text-align: left;
						text {
							margin-bottom:4rpx;
							width: 100%;
							display: block;
							color: #8A8583;
							word-break: break-all;
							text-overflow: ellipsis;
							overflow: hidden;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;

						}
					}

					.sidebar_c {
						width: 158rpx;
						height: 58rpx;
						background: #FFFFFF;
						border: 1px solid #F56134;
						box-shadow: 0px 0px 5px 0px rgba(241, 241, 241, 0.5);
						border-radius: 29rpx;
						text-align: center;
						color: #F66737;
						line-height: 58rpx;
						margin-left:10rpx;
					}
					.sidebar_hide{
						border: none;
					}
					.write-off{
						
						image{
							width: 174rpx;
							height: 133rpx;
						}
					}
				}
			}
			// 没有数据
			.notList {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				height: 400rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 426rpx;
			
				image {
					width: 426rpx;
					height: 356rpx;
					margin-bottom: 40rpx;
				}
			
				font:500 40rpx/56rpx PingFang SC;
				color: #333;
			}
		}

	}
</style>
